<template>
  <div class="app-container">
    {{ user }}
    <!-- <el-form ref="form" label-width="120px">
      <el-form-item label="昵称">
        <el-input
          v-if="nickName.inputVisible"
          ref="nickName"
          v-model="nickName.inputValue"
          class="input-new-tag"
          size="small"
          @keyup.enter.native="handleInputConfirm('nickName')"
          @blur="handleInputConfirm('nickName')"
        />
        <el-button
          v-else
          v-model="form.nickName"
          class="button-new-tag"
          size="small"
          @click="showInput('nickName')"
        >
          + 编辑
        </el-button>
      </el-form-item>
      <el-form-item>
        <el-button type="primary">保存</el-button>
        <el-button>重置</el-button>
      </el-form-item>
    </el-form> -->
  </div>
</template>

<script>
import { getUser } from "@/api/user";

export default {
  data() {
    return {
      user: {},
      nickName: {
        inputVisible: false,
        inputValue: "",
      },
      introduce: {
        inputVisible: false,
        inputValue: "",
      },
      form: {},
    };
  },
  async created() {
    this.user = this.form = await getUser();
  },
  methods: {
    handleInputConfirm(type, inputValue) {
      const { form } = this;
      const value = inputValue || this[type].inputValue;
      if (value && form[type].indexOf(value) === -1) {
        form[type].push(value);
      }
      this[type].inputVisible = false;
      this[type].inputValue = "";
    },
    handleClose(type, tag) {
      const { form } = this;
      form[type].splice(form[type].indexOf(tag), 1);
    },
    showInput(type) {
      this[type].inputVisible = true;
      this.$nextTick((_) => {
        this.$refs[type].$refs.input.focus();
      });
    },
  },
};
</script>

<style scoped>
.el-tag.dynamic {
  cursor: pointer;
}

.el-tag + .el-tag {
  margin-left: 10px;
}

.button-new-tag {
  margin-right: 10px;
  height: 32px;
  line-height: 30px;
  padding-top: 0;
  padding-bottom: 0;
}

.input-new-tag {
  width: 100px;
  margin-right: 10px;
  vertical-align: bottom;
}

/* 上传图片*/
.avatar-uploader .el-upload {
  border: 1px dashed #66b1ff;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}

.avatar-uploader .el-upload:hover {
  border-color: #409eff;
}

.avatar-uploader-icon {
  border: 1px dashed #66b1ff;

  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  line-height: 178px;
  text-align: center;
}

.avatar {
  width: 178px;
  height: 178px;
  display: block;
}
</style>
